<template>
<div class="topicCardContainer">
  <div class="content">
    <div class="top">
      <var-image
          width="55px"
          height="55px"
          fit="cover"
          :radius="40"
          :src="headIconUrl"
      >
      </var-image>
      <h2>{{ isComment ? data.username : data.user.username }}</h2>
      <h5>2022/11/26</h5>
    </div>
    <div class="main">
      <h4 style="color: #151515;font-weight: 100;font-size: 14px">
        {{ isComment ? data.content : data.topic.content }}
      </h4>
    </div>
    <div class="foot" v-if="!isComment">
      <div style="position:relative;"  @click="gotoComment">
        <var-icon name="message-text-outline" size="25"/>
        <span style="position: absolute;top: 1px">1</span>
      </div>
      <div style="position:relative;">
        <var-icon name="heart-outline" size="25"/>
        <span style="position: absolute;top:3px">{{data.topic.likes}}</span>
      </div>
    </div>
  </div>
</div>
</template>

<script lang="ts" setup>

import {ref} from "vue";
import router from "@/router";

const props = defineProps({
  data: {
    required: true
  },
  isComment: {
    type: Boolean,
    required: true
  }
})

const headIconUrl = ref('https://varlet.gitee.io/varlet-ui/cat.jpg')

const gotoComment = () => {
  if (props.isComment) {
    console.log(props , 'data')
  }
  router.push({
    name: 'comment',
    query: {
      topicId: props.data.topic.id,
      username: props.data.user.username,
      content: props.data.topic.content,
      createTime: props.data.topic.createTime
    }
  })
}

</script>

<style scoped>
.topicCardContainer{
  width: 100%;
  height: auto;
  margin-bottom: 2%;
}
.top{
  height: 70px;
  position: relative;
}
.top>h2{
  color: #151515;
  position: absolute;
  left: 74px;
  top: 4px;
}
.top>h5{
  position: absolute;
  left: 74px;
  top: 33px;
}
.content{
  width: 90%;
  margin-left: 5%;
  margin-top: 5%;
}
.foot{
  margin-top: 5%;
  display: flex;
  justify-content: space-around;
}
</style>